<template>
    <div>
        <el-timeline ref="timeline">
            <el-timeline-item :timestamp="archive.gmtCreated" placement="top" v-for="archive,index in data" :key="index">
                <el-card>
                    <el-link type="primary" class="content" @click="$router.push({name: 'ArticleMain', params: {id: archive.id}})">{{archive.title}}</el-link>
                    <br/>
                    <span class="tag" v-for="tag in archive.tags">
                        <el-tag size="mini" >{{tag.name}}</el-tag>
                    </span>
                    <!-- 防止以下按钮浮动不填充无法撑开父元素的情况 -->
                    <span class="tag">
                    </span>
                    <div style="float: right">
                        <span class="tag">
                            <el-button type="danger" size="mini" @click="delArticle(archive.id)">删除</el-button>
                        </span>
                    </div>
                </el-card>
            </el-timeline-item>
        </el-timeline>
    </div>
</template>

<script>
    export default {
        name: "ArchiveCard",
        props:{
            data: {
                type: Array,
                default: () => [
                    {
                        id: "1322432874007265281",
                        title: "测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试测试",
                        gmtCreated: "2020-10-31 14:59",
                        tags: [
                            {
                                id:"1297433487225221123",
                                name:"SpringBoot",
                            },
                            {
                                id:"1297433487225221123",
                                name:"java",
                            }
                        ]
                    },
                ],
            }
        },
        methods: {
            /**
             * 删除文章
             * @param id
             */
            delArticle(id) {
                this.$confirm("确认要删除该文章吗？", '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(async () => {
                    let params = {
                        id: id
                    }
                    let isDelete = await this.$store.dispatch("article/deleteArticle", this.$qs.stringify(params));
                    if (isDelete) {
                        this.$emit("reload");
                    }
                }).catch(() => {
                });

            }
        },
    }
</script>

<style scoped>
    /deep/.el-link.is-underline:hover::after{
        content: none;
    }
    /deep/.el-link.is-underline:hover{
        text-decoration: underline;
    }
    .content{
        font-size: 2.5rem;
        line-height: 4rem;
        margin-bottom: 1rem;
    }
    .tag{
        margin-right: 0.5rem;
        line-height: 4rem;
    }
</style>